import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import logo from '../../assets/images/logo.png'
import {
  PieChartOutlined
} from '@ant-design/icons';
import { Menu } from 'antd';
import storageUtils from '../../utils/storageUtils'
import withRouter from '../../utils/withRouter';
import './index.less'

class LeftNav extends Component {

  state = {
    // 模板
    menusList: [
      {
        label: '首页', // 菜单标题名称
        key: '/home', // 对应的path
        icon: <PieChartOutlined />, // 图标名称
      },
      {
        label: '商品',
        key: '/products',
        icon: <PieChartOutlined />,
        children: [ // 子菜单列表
          {
            label: '品类管理',
            key: '/category',
            icon: <PieChartOutlined />
          },
          {
            label: '商品管理',
            key: '/product',
            icon: <PieChartOutlined />
          },
        ]
      },

      {
        label: '用户管理',
        key: '/user',
        icon: <PieChartOutlined />
      },
      {
        label: '角色管理',
        key: '/role',
        icon: <PieChartOutlined />,
      },

      {
        label: '图形图表',
        key: '/charts',
        icon: <PieChartOutlined />,
        children: [
          {
            label: '柱形图',
            key: '/charts/bar',
            icon: <PieChartOutlined />
          },
          {
            label: '折线图',
            key: '/charts/line',
            icon: <PieChartOutlined />
          },
          {
            label: '饼图',
            key: '/charts/pie',
            icon: <PieChartOutlined />
          },
        ]
      },
    ]
  }

  // 得到当前用户的权限数组
  getCurrentMenus = () => {
    const menus = storageUtils.getUser().role.menus
    // eslint-disable-next-line
    const newMenus = this.state.menusList.map((item) => {
      if (!item.children) {
        return (
          menus.includes(item.key) ? {
            label: <Link to={item.key}>{item.label}</Link>,
            key: item.key,
            icon: item.icon
          } : '0'
        )
      }
      else {
        const childrenMenus = item.children.map((ic) => {
          return (
            menus.includes(ic.key) ? {
              label: <Link to={ic.key}>{ic.label}</Link>,
              key: ic.key,
              icon: ic.icon
            } : '0'
          )
        })
        // // 过滤其中为'0'的值
        const newChildren = []
        childrenMenus.forEach(e => {
          if (e !== '0') newChildren.push(e)
        })
        if (newChildren.length !== 0) {
          return (
            {
              label: item.label,
              key: item.key,
              icon: item.icon,
              children: newChildren
            }
          )
        }
      } 
    })
    // 过滤其中为'0'和莫名其妙产生的undefined的值
    const test = []
    newMenus.forEach(element => {
      if (element !== '0' && !!element) test.push(element)
    });
    this.setState({ menusList: test })
  }
  

  componentDidMount() {
    this.getCurrentMenus()
    // console.log(storageUtils.getUser().role.menus)
  }

  render() {
    // 默认选中
    let path = this.props.location.pathname
    if (path.indexOf('/product')===0) {  // 处理/product/detail
      path = '/product'
    }
    return (
      <div className='left-nav'>
        <Link to='/' className='left-nav-header'>
          <img src={logo} alt="logo" />
          <h1>硅谷后台</h1>
        </Link>

        <Menu
          defaultSelectedKeys={[path]}
          defaultOpenKeys={['/products','/charts']}
          mode="inline"
          theme="dark"
          // inlineCollapsed={collapsed}
          items={this.state.menusList}
        />


      </div>
    )
  }
}
export default withRouter (LeftNav)
